import {
  ScrollView,
  Image,
  StyleSheet,
  View,
  ImageBackground,
  Text,
} from "react-native";
import React, { Key, useEffect, useState } from "react";
import { Https } from "../../api";
import { MineBanner, userInfo } from "../../types";
import { Avatar, Button, Dialog, TouchableRipple } from "react-native-paper";
import { useGetStoreObject, useRemoveStore } from "../../hooks/useStorage";
import { AntDesign } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import Swiper from "react-native-swiper";
import ImageListAuto from "../../components/ImageListAout";

type TopFunListType = {
  icon: string;
  title: string;
  to?: string;
};

const TopFunList: TopFunListType[] = [
  {
    icon: "shoppingcart",
    title: "购物车",
    to: "ShoppingCar",
  },
  {
    icon: "staro",
    title: "收藏夹",
  },
  {
    icon: "gift",
    title: "积分商城",
  },
  {
    icon: "creditcard",
    title: "会员卡",
  },
];

const orderFormFunList = [
  {
    icon: "wallet",
    title: "待付款",
    to: "",
  },
  {
    icon: "book",
    title: "待发货",
  },
  {
    icon: "car",
    title: "待收货",
  },
  {
    icon: "pay-circle-o1",
    title: "退货/售后",
  },
];

const FunList = [
  {
    icon: "bank",
    title: "我的积分",
    to: "",
  },
  {
    icon: "redenvelopes",
    title: "我的优惠卷",
  },
  {
    icon: "hearto",
    title: "浏览记录",
  },
  {
    icon: "enviromento",
    title: "收获地址",
  },
  {
    icon: "idcard",
    title: "更新资料",
  },
  {
    icon: "customerservice",
    title: "客服帮助",
  },
  {
    icon: "message1",
    title: "顾客服务",
  },
];

const Mine = () => {
  const [topImg, setTopImg] = useState<string>("only");
  const [bottomImg, setBottomImg] = useState<string>("only");
  const [centreImg, setCentreImg] = useState<Array<string>>([]);
  const [userInfo, setUserInfo] = useState<userInfo>();
  const [isScrollEnabled, setIsScrollEnabled] = useState<boolean>(true);
  const navigation = useNavigation();
  const [visible, setVisible] = React.useState(false);

  const hideDialog = () => setVisible(false);
  const getMineBanner = async () => {
    const { success, data }: MineBanner = await Https.getMineBanner();
    console.log(success);

    if (success) {
      data.forEach(({ type, picUrl }) => {
        switch (type) {
          case "top":
            setTopImg(picUrl);
            break;
          case "bottom":
            setBottomImg(picUrl);
            break;
          case "swiper":
            setCentreImg([`https://m.only.cn/${picUrl}`, ...centreImg ]);
            console.log(centreImg); 
            break;
        }
      });
    }
  };
  const getUserInfo = async () => {
    const userInfo: userInfo = await useGetStoreObject("userInfo");
    setUserInfo(userInfo); 
    console.log(userInfo);
  };

  useEffect(() => {
    getMineBanner();
    getUserInfo();
  }, []);
  useEffect(() => {
    setIsScrollEnabled(!visible);
  }, [visible]);

  const handleExitLogin = async () => {
    await useRemoveStore("token");
    await useRemoveStore("userInfo");
    navigation.navigate("Home");
  };

  return (
    // <SafeAreaView style={{ backgroundColor: "#f0f0f0", flex: 0 }}>
    <ScrollView
      showsVerticalScrollIndicator={false}
      keyboardDismissMode={"on-drag"}
      scrollEnabled={isScrollEnabled}
    >
      <ImageBackground source={{ uri: topImg }} style={styles.backdropImg}>
        <View style={styles.backdropContent}>
          <Avatar.Image
            size={80}
            source={{
              uri:
                userInfo?.avatar ||
                "https://cdn.bestseller.com.cn/assets/h5/ONLY/image/logo-circle.png",
            }}
          />
          <Text style={styles.backdropContentText}>
            {userInfo?.userName || "--"}
          </Text>
        </View>
        <View style={{ position: "absolute", top: 50, left: 10 }}>
          <AntDesign
            name="leftcircle"
            size={24}
            color="#fff"
            onPress={() => navigation.navigate("Home")}
          />
        </View>
      </ImageBackground>
      <View
        style={{
          ...styles.GridMain,
          ...styles.topGrid,
        }}
      >
        {TopFunList.map((item) => (
          <TouchableRipple
            style={styles.GridItme}
            key={item.icon}
            rippleColor="rgba(0, 0, 0, .12)"
            onPress={() => item.to && navigation.navigate(item.to as "Home")}
          >
            <View style={styles.backdropContent}>
              <AntDesign name={item.icon} size={24} color="black" />
              <Text style={styles.GridItmeText}>{item.title}</Text>
            </View>
          </TouchableRipple>
        ))}
      </View>
      {/* <Image
        style={{ height: 70, width: "100%" }}
        source={{
          uri: "https://m.only.cn/" + centreImg,
        }}
      /> */}
      <Swiper style={{ height: 130 }} autoplay={true}>
        {centreImg && centreImg.map((items, index: Key) => (
          <View key={index}>
            <ImageListAuto width={"100%"} imgUrl={items} />
          </View>
        ))}
      </Swiper>

      <View style={styles.orderFormMain}>
        <View style={styles.orderFormContent}>
          <View style={styles.orderFormContentTop}>
            <View style={styles.alignCenter}>
              <AntDesign name="exception1" size={15} color="black" />
              <Text style={styles.TextSeparation}>我的订单</Text>
            </View>

            <View style={styles.alignCenter}>
              <Text style={styles.TextSeparation}>查看全部订单</Text>
              <AntDesign name="right" size={15} color="#c6c6c6" />
            </View>
          </View>

          <View
            style={{
              ...styles.GridMain,
            }}
          >
            {orderFormFunList.map((item) => (
              <TouchableRipple
                style={styles.GridItme}
                key={item.icon}
                rippleColor="rgba(0, 0, 0, .12)"
                onPress={() =>
                  item?.to && navigation.navigate(item.to as "Home")
                }
              >
                <View style={styles.backdropContent}>
                  <AntDesign name={item.icon} size={24} color="black" />
                  <Text style={styles.GridItmeText}>{item.title}</Text>
                </View>
              </TouchableRipple>
            ))}
          </View>
        </View>
      </View>
      <View style={styles.FunLists}>
        <View style={styles.CellMain}>
          {FunList.map((item) => (
            <TouchableRipple
              style={styles.CellItem}
              key={item.icon}
              rippleColor="rgba(0, 0, 0, .12)"
              onPress={() => item?.to && navigation.navigate(item.to as "Home")}
            >
              <View style={styles.justify}>
                <View style={styles.alignCenter}>
                  <AntDesign name={item.icon} size={20} color="black" />
                  <Text style={{ fontSize: 15, paddingHorizontal: 10 }}>
                    {item.title}
                  </Text>
                </View>
                <View>
                  <AntDesign name="right" size={15} color="#c6c6c6" />
                </View>
              </View>
            </TouchableRipple>
          ))}
        </View>
      </View>
      <Image
        style={{ height: 70, width: "100%", marginTop: 10 }}
        source={{
          uri: bottomImg,
        }}
      />
      <View style={styles.exit}>
        <Button
          color={"#fff"}
          mode="contained"
          buttonColor={"#000"}
          textColor={"#fff"}
          compact={true}
          style={{ borderRadius: 5, paddingVertical: 5 }}
          labelStyle={{ fontSize: 16 }}
          //   contentStyle={{ ...styles.BottomButton, ...styleAll.iosBottom }}
          onPress={() => setVisible(true)}
        >
          退出登录
        </Button>
      </View>

      <Dialog
        visible={visible}
        onDismiss={hideDialog}
        style={{ borderRadius: 10, backgroundColor: "#fff" }}
      >
        <Dialog.Content>
          <Text>您确认需要退出登录吗？</Text>
        </Dialog.Content>
        <Dialog.Actions>
          <Button textColor={"#000"} onPress={hideDialog}>
            取消
          </Button>
          <Button textColor={"#000"} onPress={handleExitLogin}>
            确认退出
          </Button>
        </Dialog.Actions>
      </Dialog>
    </ScrollView>
    // </SafeAreaView>
  );
};

export default Mine;

const styles = StyleSheet.create({
  justify: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
  },
  alignCenter: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  },
  TextSeparation: {
    fontSize: 13,
    paddingHorizontal: 5,
  },
  backdropImg: {
    height: 220,
    width: "100%",
    resizeMode: "cover",
    justifyContent: "center",
  },
  backdropContent: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  backdropContentText: {
    paddingVertical: 10,
    fontSize: 20,
    fontWeight: "600",
    color: "#fff",
  },
  topGrid: {
    width: "90%",
    marginLeft: "5%",
    position: "relative",
    top: -30,
  },
  GridMain: {
    width: "100%",
    height: 90,
    display: "flex",
    flexDirection: "row",
    backgroundColor: "#fff",
    borderRadius: 5,
    overflow: "hidden",
  },
  GridItme: {
    width: "25%",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    borderRightWidth: 1,
    borderColor: "#f7f8fa",
  },
  GridItmeText: {
    fontSize: 13,
    marginTop: 5,
  },
  orderFormMain: {
    width: "100%",
    height: 130,
    backgroundColor: "#fff",
  },
  orderFormContent: {
    width: "90%",
    height: "100%",
    marginLeft: "5%",
  },
  orderFormContentTop: {
    height: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderColor: "#f7f8fa",
  },
  FunLists: {
    height: 360,
    width: "100%",
    marginTop: 10,
    backgroundColor: "#fff",
  },

  CellMain: {
    width: "100%",
    height: "100%",
  },
  CellItem: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    height: 50,
    borderBottomWidth: 1,
    paddingHorizontal: 20,
    borderColor: "#f7f8fa",
  },
  exit: {
    width: "90%",
    marginLeft: "5%",
    paddingVertical: 20,
  },
});
